import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-statistics',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="statistics-page">
      <h2>数据统计</h2>

      <div class="stats-overview">
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-users"></i>
          </div>
          <div class="stat-info">
            <h3>总用户数</h3>
            <p class="stat-number">1,234</p>
            <p class="stat-trend up">
              <i class="fas fa-arrow-up"></i> 12.5%
            </p>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-eye"></i>
          </div>
          <div class="stat-info">
            <h3>访问量</h3>
            <p class="stat-number">45,678</p>
            <p class="stat-trend up">
              <i class="fas fa-arrow-up"></i> 8.3%
            </p>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-clock"></i>
          </div>
          <div class="stat-info">
            <h3>平均在线时长</h3>
            <p class="stat-number">25分钟</p>
            <p class="stat-trend down">
              <i class="fas fa-arrow-down"></i> 3.2%
            </p>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-chart-pie"></i>
          </div>
          <div class="stat-info">
            <h3>转化率</h3>
            <p class="stat-number">15.8%</p>
            <p class="stat-trend up">
              <i class="fas fa-arrow-up"></i> 5.7%
            </p>
          </div>
        </div>
      </div>

      <div class="charts-grid">
        <div class="chart-container">
          <div class="chart-header">
            <h3>访问趋势</h3>
            <div class="chart-actions">
              <button class="active">日</button>
              <button>周</button>
              <button>月</button>
            </div>
          </div>
          <div class="chart-placeholder">
            <i class="fas fa-chart-line"></i>
            <p>访问量趋势图</p>
          </div>
        </div>

        <div class="chart-container">
          <div class="chart-header">
            <h3>用户分布</h3>
            <div class="chart-actions">
              <button class="active">地区</button>
              <button>年龄</button>
            </div>
          </div>
          <div class="chart-placeholder">
            <i class="fas fa-chart-pie"></i>
            <p>用户分布图</p>
          </div>
        </div>

        <div class="chart-container">
          <div class="chart-header">
            <h3>活跃度分析</h3>
          </div>
          <div class="chart-placeholder">
            <i class="fas fa-chart-bar"></i>
            <p>用户活跃度分析图</p>
          </div>
        </div>

        <div class="chart-container">
          <div class="chart-header">
            <h3>系统性能</h3>
          </div>
          <div class="chart-placeholder">
            <i class="fas fa-tachometer-alt"></i>
            <p>系统性能监控图</p>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .statistics-page {
      padding: 20px;
    }

    h2 {
      color: #2c3e50;
      margin-bottom: 30px;
    }

    .stats-overview {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .stat-card {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      background: #f0f7ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-icon i {
      font-size: 24px;
      color: #3498db;
    }

    .stat-info h3 {
      margin: 0;
      font-size: 14px;
      color: #7f8c8d;
    }

    .stat-number {
      margin: 5px 0;
      font-size: 24px;
      font-weight: bold;
      color: #2c3e50;
    }

    .stat-trend {
      margin: 0;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .stat-trend.up {
      color: #2ecc71;
    }

    .stat-trend.down {
      color: #e74c3c;
    }

    .charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 20px;
    }

    .chart-container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .chart-header h3 {
      margin: 0;
      color: #2c3e50;
    }

    .chart-actions {
      display: flex;
      gap: 10px;
    }

    .chart-actions button {
      border: none;
      background: none;
      padding: 5px 10px;
      border-radius: 15px;
      color: #7f8c8d;
      cursor: pointer;
      transition: all 0.3s;
    }

    .chart-actions button.active {
      background: #3498db;
      color: white;
    }

    .chart-placeholder {
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #bdc3c7;
      border: 2px dashed #ecf0f1;
      border-radius: 5px;
    }

    .chart-placeholder i {
      font-size: 48px;
      margin-bottom: 10px;
    }

    .chart-placeholder p {
      margin: 0;
    }
  `]
})
export class StatisticsComponent implements OnInit {
  ngOnInit(): void {
    // 在这里可以添加图表初始化逻辑
  }
}